<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<title>添加地址</title>

		<meta name="viewport" content="initial-scale=1, maximum-scale=1">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<!-- 引入css文件 -->
		<link rel="stylesheet" href="../css/sm.min.css">
		<link rel="stylesheet" href="../css/sm-extend.min.css">
		<link rel="stylesheet" href="../css/iconfont.css">
	<style type="text/css">
			#index {
				margin-top: 0.4rem;
			}
			.infinite-scroll-preloader {
				margin-top: -20px;
			}
			/* 卡片内容加边距 */
			.my-cont{
				padding:.2rem .99rem;
				text-align:center
				
			}
			/* 背景色白色 */
			.page, .page-group{
				background-color: white;
			}
			/* 去掉卡片边距 */
			.facebook-card{
				margin: 0;
			}
			.card-content{
				/* margin-top: 0.625rem; */
			}
			/* 用户字体 */
			.list-block .my-user{
				font-size :0.6rem;
				color:rgb(150,150,150);
			}
			/* 头像圆角 */
			.my-photo img{
				border-radius: 1rem;
			}
			/*商品*/
			.commodity-title{
				font-weight: bold;
				font-size: medium;
			}
			.commodity-price{
				font-weight: bold;
				color: red;
				padding-right: 5rem;
				font-size: medium;
			}
			/* 用户 */
			.user-name{
				font-size :0.6rem;
				color:gray;
			}
			.leavemessage{
				font-size :0.6rem;
			}
			.link{
				font-size :0.6875rem;
				font-weight: bold;
			}
			.name{
				padding-left: 4rem;
			}
			.nickname{
				padding-left: 4rem;
				font-size :small;
			}
			.info{
				color: white;
				padding-left: 1.25rem;
				font-size :medium;
				font-weight: bold;
			}
			/* 跳转连接颜色 */
			a{
				color: inherit;
			}
			a:active{
				color: inherit;
			}
		</style>
		<style type="text/css">
			.infinite-scroll-preloader {
				margin-top: -20px;
			}
		</style>
	</head>
	<body>
		<!-- page 容器 -->
		<div class="page" id="app">
			<!-- 标题栏 -->
			<header class="bar bar-nav">
				<h1 class="title" style="color: #000000;">新增地址</h1>
			</header>

			<!-- 这里是页面内容区 -->
			<div class="content">
				<div class="list-block">
				    <ul>
				      <!-- Text inputs -->
				      <li>
				        <div class="item-content">
				          <div class="item-media"><i class="icon icon-form-name"></i></div>
				          <div class="item-inner">
				            <div class="item-title label">姓名</div>
				            <div class="item-input">
				              <input type="text" placeholder="Your name" v-model="user_address.name">
				            </div>
				          </div>
				        </div>
				      </li>
				      <li>
				        <div class="item-content">
				          <div class="item-media"><i class="icon icon-form-email"></i></div>
				          <div class="item-inner">
				            <div class="item-title label">电话</div>
				            <div class="item-input">
				              <input type="text" placeholder="phone" v-model="user_address.phone">
				            </div>
				          </div>
				        </div>
				      </li>
				      <li>
				        <div class="item-content">
				          <div class="item-media"><i class="icon icon-form-password"></i></div>
				          <div class="item-inner">
				            <div class="item-title label">国家</div>
				            <div class="item-input">
				              <input type="text" placeholder="country" v-model="address.country">
				            </div>
				          </div>
				        </div>
				      </li>
					  <li>
					    <div class="item-content">
					      <div class="item-media"><i class="icon icon-form-password"></i></div>
					      <div class="item-inner">
					        <div class="item-title label">省份</div>
					        <div class="item-input">
					          <input type="text" placeholder="province" v-model="address.province">
					        </div>
					      </div>
					    </div>
					  </li>
					  <li>
					    <div class="item-content">
					      <div class="item-media"><i class="icon icon-form-password"></i></div>
					      <div class="item-inner">
					        <div class="item-title label">城市</div>
					        <div class="item-input">
					          <input type="text" placeholder="city" v-model="address.city">
					        </div>
					      </div>
					    </div>
					  </li>
					  <li>
					    <div class="item-content">
					      <div class="item-media"><i class="icon icon-form-password"></i></div>
					      <div class="item-inner">
					        <div class="item-title label">详细地址</div>
					        <div class="item-input">
					          <input type="text" placeholder="detail" v-model="address.detail">
					        </div>
					      </div>
					    </div>
					  </li>
				  </div>
				  <div class="content-block">
				    <div class="row">
				      <div class="col-50">
						  <a @click="goBack" class="button button-big button-fill button-danger">
							  取消
						  </a>
					  </div>
				      <div class="col-50">
						  <a @click="addAddress" class="button button-big button-fill button-success">
							  提交
						  </a>
					  </div>
				    </div>
				</div>
			</div>
		</div>
		<script src='../js/jquery-3.2.1.min.js'></script>
		<script src='../js/sm.js'></script>
		<script src='../js/sm-extend.js'></script>
		<script src='../js/vue.js'></script>
		<script src='../js/axios.min.js'></script>
		<script src="../js/config.js"></script>
		
		<script type="text/javascript">
			//获取url中的参数
			function getUrlParam(name) {
			var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
			var r = window.location.search.substr(1).match(reg); //匹配目标参数
			if (r != null) return unescape(r[2]); return null; //返回参数值
			 }
		</script>
		
		<script>
			//获取URL参数
			var loginuserid = getUrlParam('loginuserid');
			
			//Vue
			var app = new Vue({
				el:"#app",
				data:{
					address:{
						country:"",
						province:"",
						city:"",
						detail:""
					},
					user_address:{
						userId:loginuserid,
						name:"",
						phone:"",
						priority:"非默认"
					}
				},
				// 方法区
				methods:{
					//跳转上层打开页面
					goBack:function(){
						window.history.go(-1)
					},
					
					addAddress:function(){
						console.log(this.user_address)
						if(this.user_address.name==null||this.user_address.name==""){
							$.toast("请填写姓名");
						}else if(this.user_address.phone==""||this.user_address.phone==null){
							$.toast("请填写电话");
						}else if(this.user_address.phone.length!=11){
							$.toast("请填写规范电话");
						}else if(this.address.country==""||this.address.country==null){
							$.toast("请填写国家");
						}else if(this.address.province==""||this.address.province==null){
							$.toast("请填写省份");
						}else if(this.address.city==""||this.address.city==null){
							$.toast("请填写城市");
						}else if(this.address.detail==""||this.address.detail==null){
							$.toast("请填写地址详情");
						}else{
							// alert("aaa");
							axios.get(serviceIP+"/market/addaddress", {
								params: {
									address: JSON.stringify(this.address),
									userAddress: JSON.stringify(this.user_address),
								},
							 	headers:{"token":token,"refreshtoken":refreshtoken}
							 }).then(result => {
							 	if(result.data.code == 200){
									//跳转回我的个人主页
									window.location="market-mypage.html?loginuserid="+loginuserid
								}
								else{
									$.toast("添加中途出错，请重试！");
								}
							 });
						}
					},
				}
			});
		</script>
		
		<script>
			$.init();
		</script>
	</body>
</html>
